<script setup>
import { ref } from 'vue';
import { useIndexStore } from "@/stores/indexStore";
const useStore = useIndexStore();
const props = defineProps(['setName']);
const emits = defineEmits(['acceptGender'])

const genderData = ref([
    {
        id: 0,
        gender: 'female'
    },
    {
        id: 1,
        gender: 'male'
    }
])

const selectGender = (item, index) => {
    emits('acceptGender', item);
    useStore.currentGender = index;
}
</script>
<template>
    <div class="input-box">
        <div class="modify-name">
            select {{ props.setName }}
        </div>
        <div class="gender">
            <p v-for="(item, index) in genderData" :key="index" @click="selectGender(item, index)"
                :style="{ color: useStore.currentGender == index ? '#1989fa' : '#333' }">
                {{ item.gender }}
            </p>

        </div>
    </div>
</template>
<style lang="scss" scoped>
.input-box {
    position: absolute;
    bottom: 0;
    z-index: 99;
    width: 100vw;
    background-color: rgb(255, 255, 255);

    .modify-name {
        height: 34rem;
        line-height: 34rem;
        text-align: center;
        font-size: 18rem;
        font-weight: 500;
        box-shadow: 0rem 2rem 5rem 2rem #d7dce0;

    }

    .gender {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding-top: 16rem;
        align-items: center;
        height: 100rem;

        p {
            font-size: 18rem;
            font-weight: 500;
            width: 90vw;
            text-align: center;
            height: 30rem;
            line-height: 30rem;
            border-bottom: 1rem solid #e5e5e5;

        }
    }

}
</style>